<script lang="ts" setup>
import { getCurrentInstance, reactive, ref } from 'vue'
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import TnEmpty from '@tuniao/tnui-vue3-uniapp/components/empty/src/empty.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnTag from '@tuniao/tnui-vue3-uniapp/components/tag/src/tag.vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import { useScrollTransparentNavbar } from '@/hooks'
import circles from '@/api/circles.js'
import { FILE_URL } from '@/api/config'

const paging = ref(null)
useZPaging(paging)
// 导航栏的高度
const navbarHeight = ref(0)
const instance = getCurrentInstance()
const state = reactive({
  data: [],
})
const navUserHomePage = (uId: number) => {
  tnNavPage(`/pagesA/userhome?otherUserId=${uId}`)
}
const { init: initTransparentScroll, opacityScrollHandle } =
  useScrollTransparentNavbar(instance)

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}
const queryList = (pageNo: any, pageSize: any) => {
  circles
    .findAlumni({
      page: pageNo,
      page_size: pageSize,
    })
    .then((res) => {
      console.log(res.data, 'findAlumni')
      paging.value.complete(res.data)
    })
    .catch((err: any) => {
      console.log(err, 'findAlumni')
      paging.value.complete(false)
    })
}
onReady(() => {
  initTransparentScroll()
})
onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop)
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      找同学
    </TnNavbar>
    <view class="container tn-pt-sm">
      <z-paging
        ref="paging"
        v-model="state.data"
        :paging-style="{ paddingTop: `${navbarHeight + 10}px` }"
        :safe-area-inset-bottom="true"
        :use-safe-area-placeholder="true"
        :hide-empty-view="true"
        @query="queryList"
      >
        <view v-if="state.data.length > 0" class="">
          <view
            v-for="(item, index) in state.data"
            :key="index"
            class="tn-flex user-lists tn-flex-col-center"
          >
            <view class="" @cilck="navUserHomePage(item.id)">
              <view class="logo-pic">
                <view class="logo-image">
                  <view
                    class=""
                    :style="
                      'background-image:url(' +
                      FILE_URL +
                      item.avatar +
                      ');width: 90rpx;height: 90rpx;background-size: cover;'
                    "
                  />
                </view>
              </view>
            </view>
            <view class="tn-pl-sm">
              <view
                class="tn-flex justify-between tn-text-ellipsis-1"
                @cilck="navUserHomePage(item.id)"
              >
                <view class="justify-content-item">
                  <text class="tn-text-lg">{{ item.nickname }}</text>
                </view>
              </view>
              <view class="tn-pt-xs tn-text-ellipsis tn-text-ellipsis-1">
                <text class="tn-color-gray tn-text-sm">
                  {{ item.introduce }}
                </text>
              </view>
              <view class="tn-flex tn-pt-sm tn-text-ellipsis">
                <TnTag
                  shape="round"
                  bg-color="#f8f7f8"
                  :border="false"
                  border-color="#ebebeb"
                  text-color="#5f7e8b"
                  font-size="22"
                  custom-class="friend-tag tn-mr-sm tn-flex-center"
                >
                  <TnIcon
                    v-if="item.gender == 1"
                    name="sex-male"
                    color="tn-aquablue"
                  />
                  <TnIcon
                    v-else-if="item.gender == 2"
                    name="sex-female"
                    color="tn-red"
                  />
                  <TnIcon v-else name="sex" color="tn-red" />
                  <text>{{ item.gender_text }}</text>
                </TnTag>
                <TnTag
                  shape="round"
                  bg-color="#f8f7f8"
                  :border="false"
                  border-color="#ebebeb"
                  text-color="#5f7e8b"
                  font-size="22"
                  custom-class="friend-tag tn-mr-sm tn-flex-center"
                >
                  {{ item.entrance_year }}级
                </TnTag>
              </view>
              <view class="tn-flex tn-pt-sm tn-text-ellipsis">
                <TnTag
                  shape="round"
                  bg-color="#f8f7f8"
                  :border="false"
                  border-color="#ebebeb"
                  text-color="#5f7e8b"
                  font-size="22"
                  custom-class="friend-tag tn-mr-sm tn-flex-center"
                >
                  {{ item.school }}
                </TnTag>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="tn-mt-xl">
          <TnEmpty mode="search" color="#cecece" size="xl">
            <template #tips>
              <view class="tn-text-center">
                <view class="tn-p" style="line-height: 60rpx">
                  暂无同学信息？赶快填写您的资料，重逢昔日同窗好友！
                </view>
                <TnButton
                  width="80%"
                  height="70rpx"
                  @click="tnNavPage('/minePages/userinfo')"
                  >完善资料</TnButton
                >
              </view>
            </template>
          </TnEmpty>
        </view>
      </z-paging>
      <view class="tn-tabbar-height" />
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
@use './styles/schoolmate.scss';
</style>
